<template>
  <el-dialog
    :title="title"
    center
    :visible.sync="open"
    width="1200px"
    append-to-body
    :show-close="!open"
    :before-close="handleClose"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-tabs>
        <el-tab-pane label="必填信息">
          <el-row>
            <el-col :span="6">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" placeholder="请输入姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="手机号" prop="phoneNumber">
                <el-input
                  v-model="form.phoneNumber"
                  placeholder="请输入手机号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item
                prop="phoneOwnership"
                :style="{ marginLeft: '10px' }"
                class="elFromItem"
              >
                <el-col :span="24">
                  <el-select
                    v-model="form.phoneOwnership"
                    :style="{ width: '80%' }"
                    placeholder="使用人"
                  >
                    <el-option
                      v-for="dict1 in dict.phoneOwnershipOptions"
                      :key="dict1.dictValue"
                      :label="dict1.dictLabel"
                      :value="parseInt(dict1.dictValue)"
                    />
                  </el-select>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态" prop="callBackState">
                <el-select
                  v-model="form.callBackState"
                  placeholder="请选择状态"
                >
                  <el-option
                    v-for="dict2 in dict.marketStatusOptions"
                    :key="dict2.dictValue"
                    :label="dict2.dictLabel"
                    :value="dict2.dictLabel"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="年龄" prop="age">
                <el-input v-model="form.age" placeholder="请输入年龄" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="form.sex">
                  <el-radio
                    v-for="dict3 in dict.sexOptions"
                    :key="dict3.dictValue"
                    :label="parseInt(dict3.dictValue)"
                    >{{ dict3.dictLabel }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row>
            
            <el-col :span="6">
              <el-form-item label="手机号2" prop="phoneNumber2">
                <el-input
                  v-model="form.phoneNumber2"
                  placeholder="请输入手机号2"
                />
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item
                prop="phoneOwnership2"
                :style="{ marginLeft: '10px' }"
                class="elFromItem"
              >
                <el-col :span="24">
                  <el-select
                    v-model="form.phoneOwnership2"
                    :style="{ width: '80%' }"
                    placeholder="使用人"
                  >
                    <el-option
                      v-for="dict4 in dict.phoneOwnershipOptions"
                      :key="dict4.dictValue"
                      :label="dict4.dictLabel"
                      :value="parseInt(dict4.dictValue)"
                    />
                  </el-select>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row> -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="多级渠道" prop="channel">
                <el-cascader
                  v-model="form.channel"
                  placeholder="请选择渠道"
                  :options="dict.marketChannelList"
                  @change="handleChannelChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预约时间" prop="reservationTime">
                <el-date-picker
                  v-model="form.reservationTime"
                  type="datetime"
                  placeholder="选择预约时间"
                  size="small"
                  style="width: 200px"
                  align="right"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="访问病种" prop="visitDisease">
                <el-cascader
                  v-model="form.projectOptions"
                  placeholder="请选择访问病种"
                  :options="dict.projectOptions"
                  separator="-"
                  @change="handleProjectChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预约门诊" prop="reservationClinic">
                <el-cascader
                  v-model="form.reservationClinic"
                  expand-trigger="hover"
                  :show-all-levels="false"
                  placeholder="请选择门诊"
                  :options="clinicOptions"
                  @change="DeptId"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="多级媒介" prop="channelFirst">
                <el-cascader
                  v-model="form.channel"
                  placeholder="多级媒介"
                  disabled
                  :options="dict.marketChannelList"
                  @change="handleChannelChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="建档人" prop="filingPerson">
                <el-input v-model="form.filingPerson" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="客户详情" prop="details">
                <el-input
                  v-model="form.details"
                  type="textarea"
                  placeholder="请输入内容"
                /> </el-form-item
            ></el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="选填选项">
          <el-row>
            <el-col :span="6">
              <el-form-item label="qq号" prop="qqNumber">
                <el-input v-model="form.qqNumber" placeholder="请输入qq号" />
              </el-form-item>
              <el-form-item label="职业">
                <el-select v-model="form.profession" placeholder="请选择职业">
                  <el-option
                    v-for="dict6 in dict.professionalOptions"
                    :key="dict6.dictValue"
                    :label="dict6.dictLabel"
                    :value="dict6.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="障碍点" prop="obstacle">
                <el-input v-model="form.obstacle" placeholder="请输入障碍点" />
              </el-form-item>
              <el-form-item label="预约tc" prop="reservationTc">
                <el-input
                  v-model="form.reservationTc"
                  placeholder="请输入预约tc"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="地址" prop="address">
                <el-input v-model="form.address" placeholder="请输入地址" />
              </el-form-item>
              <el-form-item label="经济能力">
                <el-select
                  v-model="form.economics"
                  placeholder="请选择经济能力"
                >
                  <el-option
                    v-for="dict7 in dict.economicAbilityOptions"
                    :key="dict7.dictValue"
                    :label="dict7.dictLabel"
                    :value="dict7.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否大单">
                <el-select
                  v-model="form.isBigContract"
                  placeholder="请选择是否大单"
                >
                  <el-option
                    v-for="dict8 in dict.yesOrNo"
                    :key="dict8.dictValue"
                    :label="dict8.dictLabel"
                    :value="parseInt(dict8.dictValue)"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="关键字" prop="keyword">
                <el-input v-model="form.keyword" placeholder="请输入关键字" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预约医生" prop="reservationDoctor">
                <el-input
                  v-model="form.reservationDoctor"
                  placeholder="请输入预约医生"
                />
              </el-form-item>
              <el-form-item label="性格">
                <el-select v-model="form.personality" placeholder="请选择性格">
                  <el-option
                    v-for="dict9 in dict.characterOptions"
                    :key="dict9.dictValue"
                    :label="dict9.dictLabel"
                    :value="dict9.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="消费习惯">
                <el-select
                  v-model="form.consumptionCustom"
                  placeholder="请选择消费习惯"
                >
                  <el-option
                    v-for="dict10 in dict.spendingHabitsOptions"
                    :key="dict10.dictValue"
                    :label="dict10.dictLabel"
                    :value="dict10.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="其他联系方式"
                prop="otherWay"
                :label-width="100 + 'px'"
              >
                <el-input
                  v-model="form.otherWay"
                  placeholder="请输入其他联系方式"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="有无小孩">
                <el-select
                  v-model="form.haveChild"
                  placeholder="请选择有无小孩"
                >
                  <el-option
                    v-for="dict11 in dict.haveChildOptions"
                    :key="dict11.dictValue"
                    :label="dict11.dictLabel"
                    :value="parseInt(dict.dictValue)"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="婚姻状况">
                <el-select
                  v-model="form.maritalStatus"
                  placeholder="请选择婚姻状况"
                >
                  <el-option
                    v-for="dict12 in dict.maritalStatusOptions"
                    :key="dict12.dictValue"
                    :label="dict12.dictLabel"
                    :value="parseInt(dict12.dictValue)"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="微信号" prop="wechatNumber">
                <el-input
                  v-model="form.wechatNumber"
                  placeholder="请输入微信号"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="聊天记录" prop="record">
                <el-input
                  v-model="form.record"
                  type="textarea"
                  placeholder="请输入内容"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div slot="footer" :center="true" class="dialog-footer">
      <el-button class="pan-btn blue-btn" type="primary" @click="submitForm"
        >确 定</el-button
      >
      <el-button @click="cancels">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'AddMarket',
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    dict: {
      type: Object,
      required: true,
    },
    name: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            },
          },
          {
            text: '明天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24)
              picker.$emit('pick', date)
            },
          },
          {
            text: '一周后',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            },
          },
        ],
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000 // 返回 所有时间 大于 当前时间
        },
      },
      clinicOptions: JSON.parse(localStorage.getItem('clinicLists'))[0]
        .children,
      // 表单参数
      form: {
        phoneOwnership: 0,
        sex: 0,
        callBackState: '待定',
        reservationClinic: this.$store.state.clinic.clinicId,
      },
      clinicId: '',
      // 表单校验
      rules: {
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        phoneNumber: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            pattern: /^[0-1]\d{10}$/,
            message: '手机号格式错误',
            trigger: 'blur',
          },
        ],
        phoneOwnership: [
          { required: true, message: '电话所属关系不能为空', trigger: 'blur' },
        ],
        callBackState: [
          { required: true, message: '状态不能为空', trigger: 'blur' },
        ],
        visitDisease: [
          { required: true, message: '访问病种不能为空', trigger: 'blur' },
        ],
        reservationClinic: [
          { required: true, message: '预约门诊不能为空', trigger: 'blur' },
        ],
        reservationTime: [
          { required: true, message: '预约时间不能为空', trigger: 'blur' },
        ],
        channel: [{ required: true, message: '渠道不能为空', trigger: 'blur' }],
        details: [
          { required: true, message: '客户详情不能为空', trigger: 'blur' },
        ],
        phoneOwnership: [
          { required: true, message: '状态不能为空', trigger: 'blur' },
        ],
        // phoneNumber2: [
        //   {
        //     pattern: /^1(3|4|5|7|8|9)\d{9}$/,
        //     message: '手机号格式错误',
        //     trigger: 'blur',
        //   },
        // ],
      },
    }
  },
  computed: {
    ...mapState({
      userName: (state) => state.user.name,
    }),
  },
  watch: {
    value(newVal) {
      this.reset()
    },
  },
  created() {
    this.form.filingPerson = this.name
  },
  methods: {
    handleClose() {
      return
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.reservationTime = this.parseTime(
            this.form.reservationTime,
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
          this.form.reachState = '预约'
          this.form.filingPerson = this.userName
          this.form.record = ''
          // this.staticAvatar()
          this.$emit('submit', { ...this.form })
          this.reset()
        }
      })
    },
    // staticAvatar() {
    //   if (this.form.sex == 0) {
    //     if (this.form.age == 0) {
    //       this.form.imageUrl =
    //         'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/dad.jpg'
    //     } else if (this.form.age < 18) {
    //       this.form.imageUrl =
    //         'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/son.jpg'
    //     } else if (this.form.age > 50) {
    //       this.form.imageUrl =
    //         'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/grandpa.jpg'
    //     } else {
    //       this.form.imageUrl =
    //         'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/dad.jpg'
    //     }
    //   } else if (this.form.sex == 1) {
    //     if (this.form.age == 0) {
    //       this.form.imageUrl =
    //         'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/dad.jpg'
    //     } else if (this.form.age < 18) {
    //       this.form.imageUrl =
    //         'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/son.jpg'
    //     } else if (this.form.age > 50) {
    //       this.form.imageUrl =
    //         'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/grandpa.jpg'
    //     } else {
    //       this.form.imageUrl =
    //         'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/dad.jpg'
    //     }
    //   } else {
    //     if (this.form.age == 0) {
    //       this.form.imageUrl =
    //         'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/mom.jpg'
    //     } else if (this.form.age < 18) {
    //       this.form.imageUrl =
    //         'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/girl.jpg'
    //     } else if (this.form.age > 50) {
    //       this.form.imageUrl =
    //         'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/nanna.jpg'
    //     } else {
    //       this.form.imageUrl =
    //         'https://yiya-erp.oss-cn-shanghai.aliyuncs.com/static/mom.jpg'
    //     }
    //   }
    // },
    cancels() {
      this.$emit('cancel', false)
      // this.$refs.form.resetFields()
      this.reset()
    },
    handleProjectChange(e) {
      if (e) {
        this.form.visitDisease = e.join('-')
      } else {
        return
      }
    },
    handleChannelChange(e) {
      if (e) {
        ;[
          this.form.channelFirst,
          this.form.channelSecond,
          this.form.channelThird,
        ] = e
      } else {
        return
      }
    },
    //选择门诊
    DeptId(e) {
      if (e) {
        this.form.reservationClinic = e[1]
      } else {
        return
      }
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        name: undefined,
        sex: 0,
        age: undefined,
        phoneNumber: undefined,
        phoneOwnership: 0,
        callBackState: '待定',
        reservationClinic: this.$store.state.clinic.clinicId,
        reservationTime: undefined,
        reservationDisease: undefined,
        visitDisease: undefined,
        reservationNumber: undefined,
        channel: undefined,
        channelFirst: undefined,
        channelSecond: undefined,
        channelThird: undefined,
        address: undefined,
        wechatNumber: undefined,
        qqNumber: undefined,
        otherWay: undefined,
        reservationDoctor: undefined,
        reservationTc: undefined,
        obstacle: undefined,
        filingPerson: this.userName,
        filingTime: undefined,
        keyword: undefined,
        details: undefined,
        record: undefined,
        profession: undefined,
        consumptionCustom: undefined,
        economics: undefined,
        isBigContract: undefined,
        haveChild: undefined,
        maritalStatus: undefined,
        personality: undefined,
        teethCaseE: undefined,
        reachState: undefined,
        firstVisitTime: undefined,
        followPerson: undefined,
        reach: undefined,
        billingState: undefined,
        remarks: undefined,
        createTime: undefined,
        createBy: undefined,
        updateTime: undefined,
        updateBy: undefined,
      }
      this.resetForm('form')
    },
  },
}
</script>

<style lang="scss" scoped>
.collapseItems >>> .el-collapse-item__header {
  justify-content: flex-end !important;
  color: #1890ff !important;
  font-weight: 700;
}
.collapseItems >>> .el-collapse-item__arrow {
  margin: 2px 8px 0 0 !important;
}
.elFromItem >>> .el-form-item__content {
  margin: 0 !important;
}
</style>
